<template>
  <uni-popup ref="LocationDialogPopup" type="center" :mask-click="false">
    <view class="ReportDialog-container">
      <view class="f1"></view>
      <view class="title">请打开您的定位</view>
      <view class="desc">为了防止您学错题库，请打开您的定位，以获取最新地方题库！</view>
      <view class="btn confirm" @click="getLocation">确 定</view>
      <view class="btn" @click="close">以后再说</view>
    </view>
  </uni-popup>
</template>

<script>
import {mapGetters} from 'vuex';
import utils from "@/libs/utils";
import permissionUtils from "@/libs/permissionUtils";

export default {
  name: 'LocationDialog',
  data() {
    return {}
  },
  mounted() {
  },
  computed: {
    ...mapGetters(['platform', 'systemInfo'])
  },
  methods: {
    async tryOpen() {
      if (await permissionUtils.check('location')) {
        console.log('定位 已经关闭')
        return false
      }

      if (await permissionUtils.isRequestedToday('location')) {
        console.log('定位 今天已经请求过')
        return false
      }
      permissionUtils.skipToday('location')
      console.log('定位 打开')
      this.$refs.LocationDialogPopup.open()
      return true
    },
    close() {
      this.$refs.LocationDialogPopup.close()
    },
    async getLocation() {
      console.log('getLocation')
      const res = await permissionUtils.request('location', {
        title: '地理位置权限',
        desc: '当您使用APP时，因各地政策不同，会在组织练习、考试题库时访问您的地理位置权限。不授权上述权限，不影响APP其它功能使用。'
      })

      if (res.status !== 1) {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }
      try {
        uni.showLoading({
          title: '定位中...',
        })
        const res = await utils.getLocation()
        this.$emit('locationChanged', res)
      } catch (e) {
        console.log(e)
      }
      uni.hideLoading()
      this.close()
    }
  }
}
</script>

<style scoped lang='scss'>
.ReportDialog-container {
  background-image: url("http://down.qwdata.vip/app_icon/1706108363712");
  width: 630rpx;
  background-color: #fff;
  background-size: 630rpx 712rpx;
  background-repeat: no-repeat;
  //background-size: contain;
  display: flex;
  flex-direction: column;
  border-radius: 50rpx;
  padding-bottom: 40rpx;

  .close-icon {
    width: 24upx;
    height: 24upx;
    position: absolute;
    right: 40upx;
    top: 40upx
  }

  .title {
    font-size: 19px;
    color: #1A1D2E;
    align-self: center;
    font-weight: bold;
    margin-top: 280rpx;
  }

  .desc {
    font-size: 15px;
    color: #505050;
    margin-top: 40rpx;
    align-self: center;
    margin-left: 64rpx;
    margin-right: 64rpx;
    margin-bottom: 40rpx;
    text-align: center;
    line-height: 24px;
  }

  .btn {
    height: 94rpx;
    margin: 0 46rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    border-radius: 50px;
    background-color: #eee;
    margin-top: 32rpx;
    &.progress {
      color: #000;
      font-weight: bold;
      font-size: 16px;
      border: 1px solid #2d90fc;
      position: relative;
      overflow: hidden;

      .bg {
        background-color: #2d90fc;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
      }
    }

    &.confirm {
      background-color: #2d90fc;
      color: #fff;
      margin-top: 0;
    }
  }
}
</style>
